<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css\nloging.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="JS\vue.js"></script>
    <script src="JS\jquery-1.8.3.min.js"></script>
    <script src="./axios.js"></script>
    <script src="D:\Program Files (x86)\vscodeProject\VUE\NE\Nike_login\server\router.js"></script>
    <title>登录</title>
</head>

<body>
    <div id="experience-wrapper" class="dlan">
        <div class="nike-unite">
            <header>
                <div class="nike-unite-swoosh"></div>
                <div class="view-header">登录NIKE账号</div>
            </header>
            <div action="#" class="nike-unite-form">
                <div class="input-group input-group-lg" id="phon" v-bind:class="aa">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-lg">+86</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Sizing example input"
                        aria-describedby="inputGroup-sizing-lg" placeholder="手机号码" ref="phone1" v-model="uiphone">
                </div>
                <div v-show="flag1" style="color: #fe0000;" >请输入电话号码</div>
                <div class="input-group input-group-lg" id="passs" v-bind:class="bb">
                    <input type="text" class="form-control" aria-label="Sizing example input" placeholder="密码"
                        ref="password1" v-model="upw">
                </div>
                <div v-show="flag2" style="color: #fe0000;" >请输入密码</div>
                <div class="emaillogin"><a id="aa11">使用电子邮件登录</a></div>
                <div class="logstatu">
                    <input type="checkbox" class="boxx1"><a>&nbsp&nbsp&nbsp保持登录状态</a>
                    <a class="forgetmm">忘记密码</a>
                </div>
                <div class="nike-yins" v-bind:class="cc">
                    <input type="checkbox" class="boxx1" @click="selectt">
                    <a>我同意Nike的<a
                            href="https://agreementservice.svs.nike.com/rest/agreement?agreementType=privacyPolicy&country=CN&language=zh&mobileStatus=false&requestType=redirect&uxId=com.nike.commerce.nikedotcom.web">隐私政策</a>和
                        <a
                            href="https://agreementservice.svs.nike.com/rest/agreement?agreementType=termsOfUse&country=CN&language=zh&mobileStatus=false&requestType=redirect&uxId=com.nike.commerce.nikedotcom.web">使用条款</a></a>
                </div>
                <button class="buu1" @click="changee"><a :href="where">登录</a></button>
                <div class="nike-vip">还不是会员？
                    <a href="./regist.html">立即加入</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        
        let dll = new Vue({
            el: ".dlan",
            data: {
                flag1: false,
                flag2: false,
                aa: '',
                bb: '',
                cc:'',
                ifxuanzhong: false,
                user:[],
                uiphone:"",
                upw:"",
                where:"javasript:;"
            },
            methods: {
                selectt:function(){
                    this.ifxuanzhong=!this.ifxuanzhong;
                },
                changee: function () {
                   
                    // 
                    let p1 = this.$refs.phone1.value;
                    let p2 = this.$refs.password1.value;
                    if (p1 == "") {
                        this.flag1 = true;
                        this.aa = "b";
                    }else{
                        this.aa="";
                        this.flag1 = false;
                    }
                    if (p2 == "") {
                        this.flag2 = true;
                        this.bb = "b";
                    }else{
                        this.bb="";
                        this.flag2 = false;
                    }
                    if(this.ifxuanzhong==false){
                        this.cc="b";
                    }else{
                        this.cc="";
                    }
                    // 
                    console.log(this.user.length);
                    console.log(this.user[3].name);
                
                    for(var i=0;i<this.user.length;i++){
                        if(this.uiphone==this.user[i].name&&this.upw==this.user[i].password){
                            console.log(this.user[i].name);
                            alert("登陆成功")
                            this.where="./首页.html"
                            break;
                        }
                        // else{
                        //     alert("登陆失败")
                        //     break;
                        // }
                    }
                },           
            },
        
            mounted(){
                axios.get('http://127.0.0.1/user').then(res=>{
                        console.log(res.data);
                        this.user=res.data
                        console.log(this.user);
                        console.log(this.user.length);
                    }).catch(err=>{
                        console.log("获取数据失败" + err);
                    })
            }
        })
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>